<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    header {
      width: 375px;
      height: 60px;
      background-color: lightcoral;
      color: white;
      font-size: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
    span {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
  </style>
</head>
<body>
  <div id="app">
    <!-- 当子组件需要被调用多次，并且显示的内容是不一样的时候 -->
    <!-- 那么那个不一样的内容就应该通过父传子传进来 -->
    
    <!-- 
      步骤：
        1. 传递：在父组件里面的子组件标签上面添加自定义属性(是否需要加冒号)
        2. 接受：在子组件里面通过props选项的方式接受
    -->
    <h2>组件传参-父传子</h2>

    <!-- 我们可以在标签上面通过自定义属性的方式进行传参 -->
    <!-- 自定义属性也要用连字符 -->
    <!-- 没有冒号，传的都是字符串 -->
    <!-- 加上冒号，转成对应的js表达式 -->
    <my-header title="猫眼电影" :has-icon="true"></my-header>
    <br>
    <my-header title="详情页" :has-icon="false"></my-header>

    <hr>

    <my-list></my-list>
  </div>

  <script src="../vue3.js"></script>
  <script>
    const {createApp} = Vue;

    const MyHeader = {
      // 用props选项来接受传进来的自定义属性
      props: ["title", "hasIcon"],
      template: `
        <header>{{ title }}<span v-if="hasIcon">🏀</span></header>
      `
    }

    const MyItem = {
      // props: ["item"],
      props: ["title", "content"],
      // template: `
      //   <div>
      //     <h3>{{ item.title }}</h3>
      //     <p>{{ item.content }}</p>  
      //   </div>
      // `
      template: `
        <div>
          <h3>{{ title }}</h3>
          <p>{{ content }}</p>  
        </div>
      `
    }

    const MyList = {
      components: {
        MyItem
      },
      // 当子组件循环多次的时候，数据要在父组件去获取
      data() {
        return {
          list: [
            {
              id: 1,
              title: "今天，从一盏马灯说起",
              content: "90年前的10月17日至20日，中央红军8.6万余人从江西于都出发"
            },
            {
              id: 2,
              title: "云南南诏：古艺活色生彩",
              content: "小镇烟火气，最抚凡人心。乡镇是连接城乡的枢纽，也是承载中国文明传承与现代化发展协调统一的关键一环。"
            },
            {
              id: 3,
              title: "释放文旅联动乘数效应",
              content: "10月22日至24日，金砖国家领导人第十六次会晤将在俄罗斯喀山举行，这也是金砖国家大扩员后的首次峰会"
            }
          ]
        }
      },
      // template: `
      //   <div>
      //     <my-item v-for="item in list" :key="item.id" :item="item"></my-item>
      //   </div>
      // `
      template: `
        <div>
          <my-item v-for="item in list" :key="item.id" :title="item.title" :content="item.content"></my-item>
        </div>
      `
    }

    const app = createApp({
      components: {
        MyHeader,
        MyList
      }
    });

    app.mount("#app");
  </script>
</body>
</html>